<template>
  <div class="page-root">
   
    <BasePanel>
     
      <BaseSearch :search="searchProps" @searchData="updateTable" @resetData="updateTable" />
      <div class="table-top-wrap">
        <div class="table-title">
          <!-- <span>列表</span> -->
        </div>
        <!-- <div class="btn-gruop">
          <span>合计消耗：<span style="color: #73ace8; line-height: 35px;">{{ money }}</span></span>
          <a-button type="primary" icon="download" ghost @click="handleExport">导出</a-button>
        </div> -->
      </div>
      <a-button class="editable-add-btn" @click="handleAdd">
        绑定达人
      </a-button>
      <BaseTable :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="false"
        :scroll="{ x: 1000 }">
        <template slot="logo" slot-scope="{ record }" >
          <div class="table_info">
            <img  class="table_img" :src="
                  record.portrait
                    ? processImage(record.portrait)
                    : processImage(
                        '/storage/app_icon/20241115/8db41e60976fb7f1210af4e19c2122cb.png'
            )"/>
            <div class="table_info_text">
              <div class="table_info_text_title">{{ record.nickname }}</div>
              <div class="table_info_good_title">快手ID: {{ record.ks_user_id }}</div>
             
            </div>
          </div>
        </template>
        <template slot="performance" slot-scope="{ record }">
            <div class="table_info_text_desc">
              <div>申样交付率: {{ record.delivery_rate - 0 }}%</div>
              <div style="color: #73ace8;cursor: pointer;" @click="view_details(record.ks_user_id)">查看详情</div>
            </div>
        </template>
        <template slot="task_status" slot-scope="{ record }">
          <div class="table_info_text_desc">
            <!-- <div>申样交付率: {{ record.delivery_rate - 0 }}%</div> -->
            <div style="color:#ff790c;cursor: pointer;" @click="View_address(record.ks_user_id)">查看地址</div>
          </div>
        </template>
        <template slot="operate" slot-scope="{ record }">
          <a-popconfirm
          title="确认要删除达人?"
          @confirm="() => onDelete(record.id)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
        </template>
      </BaseTable>
      <div v-show="dataSource.length > 0" class="page-footer">
        <BasePagination :page-key.sync="pageKey" :get-list="tableInit" />
      </div>
    </BasePanel>
    <FormModal :visible="formShow" :default="defaultObj" @success="successForm" @close="closeForm" />
    <FormModal1 :visible="formShow1" :dataList="defaultObj1" @success="successForm1" @close="closeForm1" />
    <FormModal2 :visible="formShow2"  @success="successForm2" @close="closeForm2" :promotionId="promotionId" />
  </div>
</template>

<script>
import { searchProps2 as searchProps, columns2 as columns } from './option.js';
import * as Ajax from '@/api/channel';
import { ajaxDownload } from '@/utils/export.js';
import { mapState, mapGetters } from "vuex";
import FormModal from './form';
import FormModal1 from './form1';
import FormModal2 from './form2';
export default {
  components: {
    FormModal,
    FormModal1,
    FormModal2,
  },
  data() {
    return {
      searchProps,
      columns,
      searchForm: {},
      loading: true,
      dataSource: [],
      pageKey: {
        pageSize: 10,
        total: 1,
        current: 1,
      },
      money: 0,
      typeTask_status: {
        1: '进行中',
        2: '已完成',
        0: '未完成',
        '-1': '已失效',
      },
      formShow: false,
      defaultObj: {},
      formShow1: false,
      defaultObj1: [],
      formShow2: false,
      addressList: [],
      promotionId:''
    };
  },
  created() {
    this.tableInit();

  },
  computed: {
    ...mapGetters("user", ["getCdnUrl", "getUserInfo"]),
  },
  methods: {
    processImage(imageUrl) {
      if (imageUrl === undefined || imageUrl === null) {
        return ""; // 或者返回一个默认的 URL
      }

      if (!imageUrl.startsWith("http")) {
        return this.getCdnUrl + imageUrl;
      }
      return imageUrl;
    },
    getStatusColor(status) {
      const statusColorMap = {
        1: '#1890FF', // 进行中
        2: '#19A452 ', // 已完成
        0: '#E33B35 ', // 未完成
        '-1': '#666666', // 已失效
      };
      return statusColorMap[status] || '#000000'; // 默认颜色为黑色
    },
    async handleExport() {
      this.loading = true
      const { current, pageSize } = this.pageKey;
      const params = { pageNum: current, pageSize, ...this.searchForm };
      if (params.time) {
        params.startTime = params.time[0] + ' 00:00:00';
        params.endTime = params.time[1] + ' 23:59:59';
      } else {
        params.startTime = this.getFormattedDate('start');
        params.endTime = this.getFormattedDate('end');
      }
      delete params.time;
      const queryString = new URLSearchParams(params).toString();
      await ajaxDownload(`/web/channel/loan/list/export?${queryString}`, 'get')(params)
      this.loading = false
    },
  async  getSelect() {
      Ajax.getChannelSelect().then((res) => {
        if (res.success) {
          searchProps[0].selectOptions = Array.isArray(res.data)
            ? res.data.map((it) => ({
              ...it,
              label: it.channelName,
              value: it.id,
            }))
            : [];
        }
      });
      Ajax.getProductSelect().then((res) => {
        if (res.success) {
          searchProps[1].selectOptions = Array.isArray(res.data)
            ? res.data.map((it) => ({
              ...it,
              label: `${it.productName}(${it.productNike})`,
              value: it.id,
            }))
            : [];
        }
      });
      const params = { ...this.searchForm };
      if (params.time) {
        params.startTime = params.time[0] + ' 00:00:00';
        params.endTime = params.time[1] + ' 23:59:59';
      } else {
        params.startTime = this.getFormattedDate('start');
        params.endTime = this.getFormattedDate('end');
      }
      delete params.time;
      const res = await Ajax.loanlistsum(params)
      if(res.success){
        this.money = res.data
      }
      
    },
    updateTable(params = {}) {
      this.searchForm = { ...params };
      this.pageKey = this.$options.data().pageKey;
      this.tableInit();
    },
      // 当天日期
      getFormattedDate(type) {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');

      if (type === 'start') {
        return `${year}-${month}-${day} 00:00:00`;
      } else if (type === 'end') {
        return `${year}-${month}-${day} 23:59:59`;
      }
    },
    // table 初始化
    tableInit() {
      this.loading = true;
      const { current, pageSize } = this.pageKey;
      const params = {
        page: current,
        list_rows: pageSize,
        ...this.searchForm,
      };
      
      delete params.time;
      Ajax.customerList(params)
        .then((res) => {
          if (res.error === 0) {
            this.dataSource = res.data.data
            this.pageKey.total = res.data.total;
          }
         
        })
        .finally(() => {
          this.loading = false;
        });
    },
    showDetails(id) {
      this.$emit('show-details', id);
    },
    handleAdd(){
      this.formShow = true;
    },
    view_details(ks_user_id){
      this.formShow1 = true;
      Ajax.talentDeliveryRateDetail({ks_user_id}).then((res) => {
       if (res.error === 0) {
        this.defaultObj1 = [res.data]
       }
      })
    },
    View_address(id){
      this.formShow2 = true;
      this.promotionId = id
     
    },
    successForm() {
     
      this.formShow = false;
      this.defaultObj = {};
    },
    closeForm() {
      this.formShow = false;
      this.defaultObj = {};
      this.tableInit();
    },
    successForm1() {
     
     this.formShow1 = false;
     this.defaultObj1 = [];
   },
   closeForm1() {
     this.formShow1 = false;
     this.defaultObj1 = [];
   },
   successForm2() {
     
     this.formShow2 = false;
     this.addressList = [];
   },
   closeForm2() {
     this.formShow2 = false;
     this.addressList = [];
   },
    onDelete(id){
      console.log(id);
      Ajax.customersDel({id})
        .then((res) => {
          if (res.error === 0) {
            this.$message.success('删除成功');
            this.tableInit();

          }
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.BasePanel-root {
  padding: 10px 20px 20px;
}

.tabs-wrap {
  margin-bottom: 10px;
}

.table-wrap {
  margin-top: 16px;
}

.table-top-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-title {
  flex: 1;

  span {
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 18px;
      background-color: #1890ff;
      margin-right: 8px;
      position: relative;
      top: -1px;
    }
  }
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;

  &>button {
    margin-left: 12px;

    &:first-child {
      margin-left: 0;
    }
  }
}
.table_info {
  display: flex;
  align-items: center;
  cursor: pointer;
  .table_img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .table_info_text {
    margin-left: 20px;
    font-size: 12px;
    line-height: 26px;
    .table_info_text_title, .table_info_good_title {
      width: 300px;
      overflow: hidden;   
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
